<template>
  <div>
    <myVideoDialog :video-info="videoDialogInfo" preview-info="true" visible="visibleDialog" />
    <div class="card-header flex-head">
      <!-- 搜索工作栏 -->
      <el-form
        class="no-border-form"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="0px"
      >
        <el-form-item label="" prop="name">
          <el-input
            class="fontSize"
            v-model="queryParams.name"
            placeholder="搜索"
            clearable
            :size="isPhone.value"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" :size="isPhone.value">
            <Icon icon="ep:search" />
            <span class="fontSize">搜索{{ test.value }}</span>
          </el-button>
        </el-form-item>
      </el-form>

      <template v-for="(item, index) in searchHistoryList">
        <!-- 历史搜索信息  -->
        <el-row v-if="index % 3 === 0" :key="item.id">
          <el-col>
            <el-text class="fontSize" type="info" @click="handleQueryBySearchHistory(item.name)">
              {{ item.name + ' ' }}
            </el-text>

            <el-text
              v-if="index + 1 < searchHistoryList.length"
              class="fontSize"
              type="info"
              @click="handleQueryBySearchHistory(searchHistoryList[index + 1].name)"
            >
              {{ searchHistoryList[index + 1].name + ' ' }}
            </el-text>

            <el-text
              v-if="index + 2 < searchHistoryList.length"
              class="fontSize"
              type="info"
              @click="handleQueryBySearchHistory(searchHistoryList[index + 2].name)"
            >
              {{ searchHistoryList[index + 2].name + ' ' }}
            </el-text>
          </el-col>
        </el-row>
      </template>
    </div>

    <div ref="scrollRef" class="flex-container">
      <!-- 通过 height="400px" 属性设置滚动条高度，若不设置则根据父容器高度自适应。   max-height="400px当元素高度超过容器元素scrollbarRef.value?.clientHeight/3高度，才会显示滚动条。max-height="500px"-->
      <el-scrollbar ref="elscrollbar" always @scroll="handleScroll">
        <!-- 整个滚动条所在元素 主要获取整个元素可见窗口高度 -->
        <div ref="scrollbarRef">
          <el-row>
            <!-- 设置总行数 -->
            <el-col :span="24">
              <div class="grid-content ep-bg-purple-dark"></div>
            </el-col>
          </el-row>
          <template v-for="(item, index) in list">
            <!-- 每行n列 这里求余数方式 每行取2列数据 -->
            <el-row v-if="index % 2 === 0" :key="item.id">
              <el-col :span="12">
                <div class="grid-content ep-bg-purple">
                  <el-card shadow="hover" class="cardClass" ref="refCard">
                    <template #header>
                      <div class="card-header">
                        <span>
                          <i class="el-icon-shopping-cart-full" style="color: #409eff">
                            <span style="color: #409eff">{{ ' ' + item.name }} </span>
                          </i>
                        </span>
                      </div>
                    </template>

                    <div>
                      <!-- <el-checkbox v-model="item.checked" style="float: right; padding: 3px 0"
                @click.native="orderCardHandle(item)"> -->
                      <!-- <i class="el-icon-success" style="float: right "></i> -->
                      <!-- </el-checkbox> -->

                      <!-- 商品封面视频或图片  -->

                      <template v-if="item.videoUrl">
                        <video-player
                          :ref="'videoplay' + item.id?.toString()"
                          class="videosClass"
                          :id="'videoplay' + item.id?.toString()"
                          :src="item.videoUrl"
                          :poster="item.picUrl"
                          crossorigin="anonymous"
                          controls
                          playsinline
                          :volume="0.6"
                          x5-video-player-type="h5"
                          :options="playerOptions"
                          @play="playFun(item.id, item.videoUrl)"
                        />
                      </template>
                      <template v-else>
                        <el-image :src="item.picUrl" fit="fill" lazy />
                      </template>
                    </div>
                    <!-- <time class="time">{{ currentDate }}</time> -->
                    <!-- <el-button type="text" class="button">操作按钮</el-button> -->

                    <!-- 页脚 -->
                    <!-- <template #footer> -->
                    <div class="bottom clearfix">
                      <p class="el-icon-shopping-cart-full" style="color: #409eff">
                        {{ item.introduction }}
                      </p>
                      <!-- <div v-html="item.description"></div> -->
                      <p class="el-icon-shopping-cart-full" style="color: red">
                        {{ ' ￥' + item.price }}

                        <!-- <el-input-number v-model="item.nnum" :precision="2" :step="0.1" :min="0" :max="1000" placeholder="选购数量"
                  @change="selectTrigger(item.nnum, item.cmaterialid)" size="mini">
                </el-input-number> -->
                      </p>
                      <!-- <span v-if="item.norigtaxmny != null && item.norigtaxmny > 0" style="color: #409EFF"> {{
                item.norigtaxmny + ' 元' }}
              </span> -->
                    </div>
                    <!-- </template> -->
                  </el-card>
                </div>
              </el-col>

              <el-col v-if="index + 1 < list.length" :span="12">
                <div class="grid-content ep-bg-purple">
                  <el-card shadow="hover" class="cardClass" ref="refCard">
                    <template #header>
                      <div class="card-header">
                        <span>
                          <i class="el-icon-shopping-cart-full" style="color: #409eff">
                            <span style="color: #409eff">{{ ' ' + list[index + 1].name }} </span>
                          </i></span
                        >
                      </div>
                    </template>

                    <div>
                      <!-- <el-checkbox v-model="item.checked" style="float: right; padding: 3px 0"
                @click.native="orderCardHandle(item)"> -->
                      <!-- <i class="el-icon-success" style="float: right "></i> -->
                      <!-- </el-checkbox> -->

                      <!-- 商品封面视频或图片 注释 不需要根据父元素大小调整视频元素video-player大小了 -->

                      <template v-if="list[index + 1].videoUrl">
                        <video-player
                          :ref="'videoplay' + list[index + 1].id?.toString()"
                          class="videosClass"
                          :id="'videoplay' + list[index + 1].id"
                          :src="list[index + 1].videoUrl"
                          :poster="list[index + 1].picUrl"
                          crossorigin="anonymous"
                          controls
                          playsinline
                          :volume="0.6"
                          x5-video-player-type="h5"
                          :options="playerOptions"
                          @play="playFun(list[index + 1].id, item.videoUrl)"
                        />
                      </template>

                      <template v-else>
                        <el-image :src="list[index + 1].picUrl" fit="fill" lazy />
                      </template>
                    </div>

                    <!-- <time class="time">{{ currentDate }}</time> -->
                    <!-- <el-button type="text" class="button">操作按钮</el-button> -->

                    <!-- 页脚 -->
                    <!-- <template #footer> -->
                    <div class="bottom clearfix">
                      <p class="el-icon-shopping-cart-full" style="color: #409eff">
                        {{ list[index + 1].introduction }}
                      </p>
                      <!-- <div v-html="list[index + 1].description"></div> -->
                      <p class="el-icon-shopping-cart-full" style="color: red">
                        {{ ' ￥' + list[index + 1].price }}

                        <!-- <el-input-number v-model="item.nnum" :precision="2" :step="0.1" :min="0" :max="1000" placeholder="选购数量"
                  @change="selectTrigger(item.nnum, item.cmaterialid)" size="mini">
                </el-input-number> -->
                      </p>

                      <!-- <span v-if="item.norigtaxmny != null && item.norigtaxmny > 0" style="color: #409EFF"> {{
                item.norigtaxmny + ' 元' }}
              </span> -->
                    </div>
                    <!-- </template> -->
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
      </el-scrollbar>
    </div>

    <!-- <template #footer>OutFooter content</template> -->
    <!-- </el-card> -->
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <showPayFrom ref="payFormRef" @success="getPayList" />
  <TenantForm ref="tenantFormRef" @success="getPayList" />
</template>

<script setup lang="ts">
// 导入滑动组件
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'

// 导入视频播放组件
import 'video.js/dist/video-js.css'
import { VideoPlayer } from '@videojs-player/vue'
// import videojs from 'video.js'

import { reactive, nextTick } from 'vue'

import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
// import { SpuDOApi, SpuDOVO } from '@/api/product/spu'
import * as ProductSpuApi from '@/api/mall/product/spu'
import * as SearchHistoryApi from '@/api/search/history/index'
import { ElScrollbar } from 'element-plus'
import { forEach } from 'min-dash'
import { number } from 'vue-types'
import showPayForm from './showPayForm.vue'
import TenantForm from './TenantForm.vue'

const dialogVisible = ref(false)

//视频封面 const poster = ref('https://static.iocoder.cn/mall/a79f5d2ea6bf0c3c11b2127332dfe2df.jpg')

// 视频链接地址 const videoSrc = ref('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')

// 视频播放器配置
const playerOptions = ref({
  // height: 200,
  // width: document.documentElement.clientWidth, //播放器宽度
  width: videoweight, //播放器宽度
  playbackRates: [0.6, 1.0, 1.5, 2.0], // 播放速度
  autoplay: false, //any 任何情况 如果true,浏览器准备好时开始回放。 false 不自动播放
  muted: true, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
})

const payFormRef = ref()
const tenantFormRef = ref()

const videoDialogInfo = ref({ url: '' })
const visibleDialog = ref(false)

function playFun(id?: number, videoUrl?: string) {
  console.debug('playfun')
  let elmessage = tenantFormRef
  debugger
  videoDialogInfo.value.url = videoUrl
  tenantFormRef.value.open(id)
  visibleDialog.value = true
}
/** 查询列表 */
const getPayList = async () => {
  loading.value = true
  try {
    console.debug('getPayList')
  } finally {
    loading.value = false
  }
}
const handleClose = () => {
  dialogVisible.value = false
}

/** 商品spu 列表 */
defineOptions({ name: 'SpuDO' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表的加载中

// 视频列表
const list = ref<ProductSpuApi.Spu[]>([
  {
    id: 1,
    name: '商品名称',
    categoryId: 1,
    keyword: '商品名称keyword',
    unit: 1,
    videoUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    picUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    sliderPicUrls: [
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
    ],
    introduction: '商品名称',
    deliveryTypes: [1],
    deliveryTemplateId: 1,
    brandId: 1,
    specType: true,
    subCommissionType: true,
    skus: [],
    description: '商品名称',
    sort: 1,
    giveIntegral: 1,
    virtualSalesCount: 1,
    price: 1,
    salesCount: 1,
    marketPrice: 1,
    costPrice: 1,
    stock: 1,
    image: 'https://via.placeholder.com/600x300?text=Slide+1',
    status: 1
  },
  {
    id: 2,
    name: '商品名称2',
    categoryId: 1,
    keyword: '商品名称keyword2',
    unit: 1,
    videoUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    picUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    sliderPicUrls: [
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
    ],
    introduction: '商品名称',
    deliveryTypes: [1],
    deliveryTemplateId: 1,
    brandId: 1,
    specType: true,
    subCommissionType: true,
    skus: [],
    description: '商品名称',
    sort: 1,
    giveIntegral: 1,
    virtualSalesCount: 1,
    price: 1,
    salesCount: 1,
    marketPrice: 1,
    costPrice: 1,
    stock: 1,
    image: 'https://via.placeholder.com/600x300?text=Slide+1',
    status: 1
  }
]) // 列表的数据
const test = ref<String>('7777')
//历史搜索列表
const searchHistoryList = ref<SearchHistoryApi.HistoryVO[]>([
  { id: 1, userid: 1, name: 'test1', sort: 1 },
  { id: 2, userid: 1, name: 'test2', sort: 2 },
  { id: 3, userid: 1, name: 'test3', sort: 3 }
])

/** 初始化 **/
onMounted(async () => {
  window.addEventListener('resize', handleRize)
  if (document.body.offsetWidth < 993) {
    isPhone.value = 'small' // 小于993视为平板及手机
    console.debug('onMounted isPhone :' + isPhone.value)
  } else {
    isPhone.value = 'large'
  }
  debugger
  let tenantFormRefLet = tenantFormRef
  window.addEventListener('resize', tenantFormRef.value.iframeHandleResize)
  // tenantFormRef.value.iframeHandleResize() // 初始化设置尺寸

  await searchHistory()

  queryParams.value.name = ''
  if (searchHistoryList.value.length > 0) {
    queryParams.value.name = searchHistoryList.value[searchHistoryList.value.length - 1].name
  }

  // searchHistoryList.value.forEach((e) => {-1
  //   queryParams.value.name += e.name + ' '
  // })
  getList()
})

// 移除事件监听器
onUnmounted(() => {
  // const scrollContainer = document.querySelector('.scroll-container');
  // scrollContainer.removeEventListener('scroll', handleScroll);
  window.removeEventListener('resize', handleRize)
  window.removeEventListener('resize', tenantFormRef.value.iframeHandleResize)
})

onUpdated(() => {
  // let cardclass = document.getElementsByClassName('cardClass')
  // if (cardclass[0] != null) {
  //   videoweight.value = cardclass[0].clientWidth * 0.93
  // }

  console.log(
    '组件更新了！videoweight:' +
      videoweight.value +
      (isPhone.value == true) +
      document.body.offsetWidth
  )
})

const imgHeight = ref('') // 图片高度自适应屏幕

const total = ref(0) // 列表的总页数
// const queryParams = reactive({
//   pageNo: 1,
//   pageSize: 10,
//   name: undefined,
//   keyword: undefined,
//   introduction: undefined,
//   description: undefined,
//   categoryId: undefined,
//   brandId: undefined,
//   picUrl: undefined,
//   sliderPicUrls: undefined,
//   sort: undefined,
//   status: undefined,
//   specType: undefined,
//   price: undefined,
//   marketPrice: undefined,
//   costPrice: undefined,
//   stock: undefined,
//   deliveryTypes: undefined,
//   deliveryTemplateId: undefined,
//   giveIntegral: undefined,
//   subCommissionType: undefined,
//   salesCount: undefined,
//   virtualSalesCount: undefined,
//   browseCount: undefined,
//   createTime: [],
// })
// 查询视频参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  tabType: 0,
  name: '',
  categoryId: undefined,
  createTime: undefined
})

const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const elscrollbar = ref()
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // const data = await ProductSpuApi.getSkuPage(queryParams.value)
    // list.value = data.list
    // total.value = data.total
    debugger
    console.debug('list   : ' + list.value[0].name)
    total.value = 1
  } finally {
    loading.value = false

    // 在Vue中使用onMounted钩子函数结合nextTick来获取动态渲染的元素高度是推荐的方法，‌尤其是在处理v-for指令渲染的列表元素时。‌

    // 在Vue中，‌当你需要获取动态渲染的DOM元素的高度时，‌直接在onMounted钩子中获取可能会遇到问题，‌因为此时DOM可能还没有完全渲染。‌为了确保获取到的是最新的、‌已经渲染的DOM元素，‌你应该使用nextTick函数。‌nextTick会等待下一次DOM更新循环结束之后执行延迟回调，‌在此期间，‌可以确保所有的DOM变更都已经完成。‌

    // 对于使用v-for指令渲染的列表元素，‌由于Vue的异步更新策略，‌直接在onMounted中尝试获取这些元素的高度可能不准确，‌因为列表中的某些项可能还没有被渲染。‌通过结合使用nextTick，‌你可以确保在尝试访问这些元素时，‌它们已经完全渲染在DOM中。‌

    // 此外，‌如果页面资源未完全渲染与加载完就尝试获取高度，‌结果也会不准确。‌因此，‌确保在页面元素完全加载完后再获取高度是非常重要的。‌

    // 综上所述，‌如果你在使用Vue（‌尤其是Vue 3）‌并且需要获取动态渲染的DOM元素的高度，‌特别是在使用v-for指令的情况下，‌你应该：‌

    //     在onMounted钩子中使用setInterval来定期检查文档是否完全加载。‌
    //     使用nextTick函数来确保在DOM更新完成后再尝试访问或修改DOM。‌

    // 这样，‌你可以更准确地获取到动态渲染的DOM元素的高度12。‌

    await nextTick()

    handleVideoweight()
    // 默认查询历史搜索信息
    // 初始化视频元素容器宽度 在onmounted里可以获取到任意一个静态的dom，注意，这里说的是静态dom，对于动态dom，他是获取不到的

    // 动态dom有2种情况

    // 1）带有v-if指令，获取不到值为false的那个dom

    // 2）带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到相关dom的

    // 重点：

    // 有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样
    // videoweight = document.getElementsByClassName('cardClass')[0].clientWidth * 0.93 //无法获取到动态元素 解决方法

    // 1）在nexttick中获取dom

    // 2）在onUpdated中获取dom
  }
}

/** 查询近期搜索关键字 */
const searchHistory = async () => {
  debugger
  loading.value = true
  try {
    // const data = await SearchHistoryApi.HistoryApi.searchLastestHistory()
    // searchHistoryList.value = data.list

    let items = [
      { id: 1, userid: 1, name: '1', sort: 1 },
      { id: 2, userid: 2, name: '2', sort: 2 }
    ]
    searchHistoryList.value = items

    console.debug('searchHistory' + searchHistoryList.value[0].id)
  } finally {
    loading.value = false
  }
}

/** 追加列表 分页追加+1 */
const pushList = async () => {
  loading.value = true
  try {
    const data = await ProductSpuApi.getSkuPage(queryParams.value)
    if (data.list.length == 0) {
      return
    }
    if (list.value.length > 9) {
      console.debug('[list.value.length] ' + list.value.length + ' data.list ' + data.list.length)

      list.value = data.list
    } else {
      list.value.push(...data.list)
    }
    // data.list.forEach((item) => {
    //   list.value.push(item)
    // })

    total.value = list.value.length
    console.debug('[plushList] [total]' + total.value)
    queryParams.value.pageNo = queryParams.value.pageNo + 1
  } finally {
    loading.value = false
    // 渲染完成后处理视频元素宽度
    await nextTick()

    handleVideoweight()
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1

  getList()
}

/** 点击历史搜索文本查询 */
const handleQueryBySearchHistory = (searchHistory) => {
  queryParams.value.name = searchHistory
  handleQuery()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ProductSpuApi.deleteSpu(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ProductSpuApi.exportSpu(queryParams)
    download.excel(data, '商品spu.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// bug?滚动条maxheight高度同时设置了整个卡片列表元素的高度
var documentclientHeight = document.documentElement.clientHeight
const refCard = ref(null)
const scrollbarRef = ref()
// const imgLoad=async () => {
//       this.$nextTick(function () {
//         // 定义页面初始的走马灯高度, 默认以第一张图片高度
//         if (this.materials.length) {
//           this.getImgAttr(this.materials[0].image, (width, height) => {
//             // 获取屏宽计算图片容器高度
//             let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
//             this.imgHeight = height / width * screenWidth + 'px'
//             let screenHeight = document.documentElement.clientHeight;
//             screenHeight = screenHeight / 3
//             this.imgHeight = screenHeight + 'px'

//             // console.log(this.imgHeight, 'this.imgHeight')
//           })
//         }
//       });

//     }

// 获取图片的实际长度和宽度
const getImgAttr = (url, callback) => {
  let img = new Image()
  img.src = url
  callback(img.width, document.documentElement.clientHeight)
  // if (img.complete) {
  //         alert('img.complete' + img.width+"  "+ img.height);

  //   callback(img.width, img.height);
  //   // console.log(img.width, img.height, 'img.width, img.height')
  // } else {
  //      alert(' img.onload fun' + img.width + "  " + img.height);

  //   img.onload = function () {
  //                alert(' img.onload fun exe ????' +  document.documentElement.scrollHeight);

  //     callback(img.width, img.height)
  //     img.onload = null
  //   }
  // }
}
// 滚动条
const scrollRef = ref<InstanceType<typeof ElScrollbar>>()
// 包含卡片的元素
const isPhone = ref('small') // 小于993视为平板及手机

// 上一次滚动高度
const lastScrollHight = ref(0)
// 上一次滚动所处时间点
const lastScrollTime = ref(0)
// 滚动条达到指定时间内指定高度时计数次数
const scrollCount = ref(0)
// 处理滚动条滚动事件
const handleScroll = ({ scrollTop, clientHeight, scrollHeight }) => {
  console.debug(
    'scrollTop, clientHeight scrollHeight ' +
      scrollTop +
      ' ' +
      scrollRef.value.clientHeight +
      ' ' +
      scrollRef.value.scrollHeight
  )
  // 处理滚动事件
  console.debug(
    '滚动条距离所在元素高度,滚动条所在元素容器如果扩展滚动高度也会增加,scrollTop拖动滚动条会一直无限增大: ' +
      scrollTop +
      '元素所在浏览器固定高度:scrollRef offsetHeight ' +
      scrollRef.value.offsetHeight +
      ' 元素高度,元素如果扩展高度会一直增加  scrollbarRef.value!.clientHeight: ' +
      scrollbarRef.value!.clientHeight +
      ' document.documentElement.clientHeight: ' +
      document.documentElement.clientHeight
    //  滚动条上或下滚动了>视频播放器元素高度hight则停止页面所有正在播放的video元素
  )
  console.debug(
    'scrollTop / scrollbarRef.value!.clientHeight :' + scrollTop / scrollbarRef.value!.clientHeight
  )

  // let top=Math.floor(document.body.scrollTop);

  // 滚动条移动到元素高度的2/3触发查询列表 scrollbarRef.value!.clientHeight为整个浏览器窗口高度当有遮罩时高度不变,此时页面可视化窗口变小时无法拖动则高度无法到达触发更新
  // if (scrollTop / scrollbarRef.value!.clientHeight > 0.6) {
  //   console.debug('滚动条移动到元素高度的2/3触发追加列表')
  //   pushList()
  // }

  // 视频播放时滚动高度达到视频元素高度停止页面所有视频播放
  // 1.滚动事件触发持续获得滚动高度scrollTop
  // 2使用时间记录字段标记法>2.1触发滚动事件一段时间后触发标记存储的高度当>某个高度值(视频元素高度值)时停止所有视频播放
  // v2调整触发逻辑记录到达底部滚动时记录首次到达底部时间,记录最后一次触发到达底部的时间 比较时间差达到多少(自定义)时即可触发业务逻辑
  // 滚动条事件持续高并发取会取到空的情况
  let getlastScrollHight = lastScrollHight.value
  let absLastNowTOP = Math.abs(scrollTop - getlastScrollHight)

  if ((scrollTop + scrollRef.value.offsetHeight) / scrollbarRef.value!.clientHeight > 0.6) {
    console.debug('滚动条到达底部70%')
    if (lastScrollTime.value == 0) {
      lastScrollTime.value = new Date()

      console.debug('lastScrollTime 记录时间:' + lastScrollTime.value)
    } else {
      let offsetTime = (new Date() - lastScrollTime.value) / 0.3
      console.debug('lastScrollTime nowTime 相差' + offsetTime)
      if (offsetTime >= 1) {
        console.debug(
          '滚动条高度距离顶部高度+容器所在元素可视窗口高度 80%整个元素高度时并且长达1秒触发追加列表'
        )

        scrollCount.value = scrollCount.value + 1
        //5秒只执行一次
        if (scrollCount.value == 1) {
          pushList()
        }
      }
      // 滚动条到达底部便不再滚动了 只执行一次可以直接调取后台数据...
      // pushList()
    }

    //5秒只执行一次 清除所处时间点与首次触发底部时间比较 处理结束后清除时间,清除计数
    setTimeout(() => {
      lastScrollHight.value = scrollTop
      lastScrollTime.value = 0
      scrollCount.value = 0
    }, 50000)
  }
  console.debug(
    'scrollTop + scrollRef.value.offsetHeight:' +
      (scrollTop + scrollRef.value.offsetHeight) +
      ' ' +
      scrollbarRef.value!.clientHeight
  )

  // scrollbarRef 数据扩展时高度会变大导致无法比较
  // if (scrollTop + scrollRef.value.offsetHeight >= scrollbarRef.value!.clientHeight) {
  //   console.debug('滚动条到达底部')
  //   pushList()
  // }
  if (absLastNowTOP > document.documentElement.clientHeight / 3) {
    console.debug(
      '滚动条上下移动' +
        absLastNowTOP +
        '超过可视窗口高度 document.documentElement.clientHeight / 3停止播放: ' +
        document.documentElement.clientHeight / 3
    )
    //5秒后拿到
    setTimeout(() => {
      lastScrollHight.value = scrollTop
    }, 5000)

    // videoPlayer.value?.pause()
    let videosClass = document.getElementsByClassName('videosClass')

    for (var i = 0; i < videosClass.length; i++) {
      let video = videosClass[i]
      video.player.pause()
    }
  }
}
// 处理视频元素宽度
const handleVideoweight = () => {
  let cardClasses = document.getElementsByClassName('cardClass')

  if (cardClasses != null && cardClasses.length > 0) {
    // 视频宽度，卡片元素clientWidth宽度的93%
    videoweight.value = cardClasses[0].clientWidth * 0.98
  }
}
// 视频宽度，比1/2clientWidth浏览器可视窗口宽度小 不如改为所处容器的可视窗口宽度即直接用视频元素所在的cardClasses元素的宽度
// var videoweight = ref(document.documentElement.clientWidth * 0.44)
var videoweight = ref(0)
// 处理浏览器窗口大小变动事件
const handleRize = () => {
  if (document.body.offsetWidth < 993) {
    isPhone.value = 'small' // 小于993视为平板及手机
    console.debug('onMounted isPhone :' + isPhone.value)
  } else {
    isPhone.value = 'large' // 小于993视为平板及手机
  }

  // 处理滚动事件
  // let top=Math.floor(document.body.scrollTop);
  documentclientHeight = document.documentElement.clientHeight
  handleVideoweight()

  console.log(
    '浏览器内部窗口大小变动事件时比如f12调试窗口遮住此时 window.innerHeight =document.documentElement.clientHeight=浏览器的可视内容高度(f12调试可看出调试框高度影响到 window.innerHeight ) window.innerHeight:' +
      window.innerHeight +
      '  document.documentElement.clientHeight:' +
      document.documentElement.clientHeight +
      '元素高度为整个浏览器高度(拖动浏览器大小时高度会被影响,f12视窗不会影响元素高度...):scrollbarRef.value!.clientHeight:' +
      scrollbarRef.value!.clientHeight +
      ' videoweight:' +
      videoweight.value +
      ' document.documentElement.clientWidth:' +
      document.documentElement.clientWidth
  )
}
</script>

<style>
/* Flex布局的核心概念

要理解Flex布局，我们必须先了解几个核心概念：
2.1 容器与项目

容器（Container）：设置了display: flex;的元素成为Flex容器。容器内的子元素自动成为Flex项目。

.container{  display: flex;}<div class="container">  <div class="item"> </div>  <div class="item">    <p class="sub-item"> </p>  </div>  <div class="item"> </div></div>

上面代码中， 最外层的 div 就是容器，内层的三个 div 就是项目。

注意： 项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素，比如上面代码的 p 元素就不是项目。flex布局只对项目生效。  详细布局描述 https://baijiahao.baidu.com/s?id=1795304916931420534&wfr=spider&for=pc*/
.flex-container {
  display: flex; /*定义Flex容器 使用Flex布局 容器里面包含着项目元素，使用 display:flex 或 display:inline-flex 声明为弹性容器 视窗单位(vw/vh)是相对于浏览器视窗大小的长度单位。vw表示视窗宽度的百分比，vh表示视窗高度的百分比。
  这意味着无论视窗的大小如何变化，元素的大小也会跟随调整。例如，width: 50vw;表示该元素的宽度为视窗宽度的50%。视窗单位特别适合实现响应式设计，使元素能够根据屏幕大小自适应调整。
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_52223183/article/details/131851483*/
  flex-direction: column; /* flex-direction 主轴方向 主轴方向 flex-direction

定义主轴的方向，也就是子项目元素排列的方向。

    row （默认）：从左到右 ltr ；从右到左 rtl

    row-reverse ：从右到左 ltr ；从左到右 rtl

    column: 相同， row 但从上到下

    column-reverse: 相同， row-reverse 但从下到上 */
  /* 换行 flex-wrap

设置子容器的换行方式，默认情况下，子项目元素都将尝试适合一行nowrap。

    nowrap （默认）不换行

    wrap 一行放不下时换行

    wrap-reverse 弹性项目将从下到上换行成多行 */
  flex-wrap: nowrap;
  /* justify-content: center; 水平居中 */

  align-items: stretch; /*  垂直居中 */

  height: 100vh; /*容器高度 父容器高度为视口高度百分比100vh=100%视窗高度 */
  font-size: 0.8vw; /* 字体大小根据视口宽度的5%来调整 */
}

.flex-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 0.8vw; /* 字体大小根据视口宽度的5%来调整 */
}
.fontSize {
  font-size: 0.8vw; /* 字体大小根据视口宽度的5%来调整 */
}
/* 浏览器查看源码调整卡片元素内间距为0 */
.el-card {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: 0px;
  --el-card-bg-color: var(--el-fill-color-blank);
}
/* videoplayer播放按钮样式 https://www.php.cn/faq/395175.html */
.video-js .vjs-big-play-button {
  font-size: 5em !important;
}
.vjs-big-play-button {
  /*height: 3vw !important;  圆形播放图标的宽 */
  /* width: 3.3vw !important;圆形播放图标的高 */
  background: rgba(0, 0, 0, 0.8) !important;
  /* border-radius: 50% !important; */
  /*text-align: center;*/
  /* line-height: 11.3vw !important;  三角形播放图标高度 */

  /* top: 50% !important;
  left: 50% !important;
  margin-left: -3.53vw !important;
  margin-top: -6.6vh !important; */
}

/* ————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/DarlingYL/article/details/130441908 */

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.caption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}
</style>
